<template>
	<view class="xinjiankehu-box">
		
		<view class="box">
			<view class="row">
				<view class="left">
					姓名
				</view>
				<input type="text" value="" v-model="news_Tit" placeholder="请填写您的姓名" />

			</view>
			<view class="row">
				<view class="left">
					性别
				</view>
					
				<!-- <view style="width: 450upx;margin-left: 120upx;" class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							当前选择<span style="margin-left: 100upx;"></span>
							请选择 <label class="iconfont"> &#xe640;</label>
						</view> -->
						<view class="uni-list-cell-db chooseInp">
							<!-- <picker @change="bindPickerChange" :value="index" :range="array"> -->
							<picker @change="bindPickerChange" :range="array">
								<view class="uni-input">{{oper_Id}}</view>
							</picker>
						</view>
					<!-- </view>
				</view> -->
			</view>
			<view class="row">
				<view class="left">
					手机号
				</view>
				<input type="text" value="" v-model="author" placeholder="请输入手机号" />
			</view>
			<view class="row">
				<view class="left" >
					生日
				</view>
				<!-- <view class="uni-list" style="width: 450upx;margin-left: 120upx;"> -->
					<!-- <view class="uni-list-cell"> -->
						<!-- <view class="uni-list-cell-left">
							当前选择
							请选择 <label class="iconfont"> &#xe640;</label>
						</view> -->
				<view class="uni-list-cell-db chooseInp">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view> 
					<!-- </view> -->
				<!-- </view> -->
				
			</view>
			<view class="row">
				<view class="left">
					所在地区
				</view>
				<view class="uni-list-cell-db chooseInp">
					<view class="adr-choose"  @click="showMulLinkageTwoPicker">
						<input type="text" value="" placeholder="请选择地区" :value="addr" disabled />
						<!-- <label class="iconfont" @click="showMulLinkageTwoPicker">&#xe640;</label> -->
						
					</view>
					<!-- <button type="default" @click="showMulLinkageTwoPicker">恩济</button> -->
					<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
					@onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
					
				</view>
			</view>
			<view class="questionBox">
				<view class="question" @click="updateUserMsg">
					<label class="iconfont label">&#xe652;</label>提交
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import global from '../../../../components/tool/homePageQuery.vue';
	import mpvuePicker from '../../../../components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '../../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '../../../../common/city.data.js';
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				token:uni.getStorageSync('token_key'),
				oper_Id:'',
				author:'',
				addr:'',
				array: ['男', '女'],
				date:'',
				news_Tit:'',
				news_Id:'',
				mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				textValue:'',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[],
				index:'',
			};
		},
		onLoad(e){
			this.news_Id = e.news_Id;//客户号
			uni.request({
				method: 'POST',
				url: global.api.queryCustomerDetail,
				header : {'content-type':'application/x-www-form-urlencoded'},
				data: {
					token: this.token,
					customerId: this.news_Id
				},
				dataType: 'json',
				success: (res) => {
					console.log("客户详情查询---"+JSON.stringify(res.data.code)+"-----"+JSON.stringify(res.data.message));
					// console.log("客户详情查询----"+JSON.stringify(res.data.data.customerList));
					// console.log(res);
					var list = new Array();
					list=res.data.data.customerList;
					console.log("客户详情长度-----------"+list.length);
					if(list.length!=0){
						for(var i=0;i<list.length;i++) {
							this.news_Tit = list[i].news_Tit;
							this.oper_Id = list[i].oper_Id;
							this.effe_Flg = list[i].effe_Flg;
							this.show_Flg = list[i].show_Flg;
							this.check_Flg = list[i].check_Flg;
							this.tag_Sign = list[i].tag_Sign;
							this.news_Id = list[i].news_Id;
							this.date = list[i].news_TitChtld;//生日
							this.addr = list[i].news_Source;//地址
							this.author = list[i].author;//手机号
						} 
					}
					
				},
				fail: (res) => {
				
				},
				complete: (res) => {
					//停止当前页面下拉刷新。
					//uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
				}
			})
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods:{
			onCancel(e) {
				console.log(e)
			},
			onConfirm(e) {
				// console.log(e.label);
				this.textValue = e.label;
				console.log("所在地区======"+e.label);
				this.addr =e.label;
			},
			// 选择城市
			showMulLinkageTwoPicker() {
				this.pickerValueArray = this.mulLinkageTwoPicker
				this.mode = 'multiLinkageSelector'
				this.deepLength = 2
				this.pickerValueDefault = [0, 0]
				this.$refs.mpvuePicker.show()
			},
			bindPickerChange: function(e) {
				//console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				this.oper_Id = this.array[this.index];
			},
			bindDateChange: function(e) {
				this.date = e.target.value;
				console.log("修改客户生日------"+this.date);
			},
			updateUserMsg(){
				uni.request({
					method: 'POST',
					url: global.api.updateCustomer,
					header : {'content-type':'application/x-www-form-urlencoded'},
					data: {
						token: this.token,
						custNo: this.news_Id,
						custName:this.news_Tit,
						sex:this.oper_Id,
						phoneNo:this.author,
						address:this.addr,
						birthDay:this.date
					},
				 
					dataType: 'json',
					success: (res) => {
						console.log("客户信息修改---"+JSON.stringify(res.data.code)+"-----"+JSON.stringify(res.data.message));
						if(res.data.code =='0'){
							uni.showToast({
								title: '修改成功,待审核后生效',
								icon: 'none',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
							function sleep2(ms) {
								return new Promise(function(resolve, reject) {
									setTimeout(resolve, ms)
								})
							}
							sleep2(1000).then(() => {
								uni.navigateTo({
										url: '../kehuxiangqing/kehuxiangqing?news_Id='+this.news_Id,
										success: res => {},
										fail: () => {},
										complete: () => {}
								});
							})
							
						}else{
							console.log("客户信息修改失败进入")
								uni.showToast({
									title: res.data.message,
									duration:2000,
									icon: 'none',
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
						}
					},
					fail: (res) => {
						console.log("..............................................fail");
						console.log("客户信息修改---"+JSON.stringify(res.data.code)+"-----"+JSON.stringify(res.message));
						console.log(JSON.stringify(res));
						uni.showLoading({
							title: res.message
						});
						setTimeout(function () {
							uni.hideLoading();
						}, 1000);
						//this.text = 'request fail';
					},
					complete: (res) => {
						//停止当前页面下拉刷新。
						//uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();
					}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
			// 获取城市
			
		}
	}
</script>

<style>
	page {
		background: rgb(255, 255, 255);
	}

	.xinjiankehu-box {
		padding-top: 10px;
		background: #f5f5f5;
	}
	.box{
		padding: 0 30upx;
		background: rgb(255, 255, 255);
	}
	
	.row {
		height: 49px;
		border-bottom: 1px solid rgba(238,238,238,1);
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.row input{
		flex: 3;
	}
	/* .left {
		font-size: 15px;
		margin-right: 20upx;
		flex: 1;
	} */
	
	.left {
		width: 150upx;
		display: flex;
		flex-direction: row;
	
		align-items: center;
		font-size: 15px;
		margin-right: 20upx;
		
	}

	.questionBox {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		padding: 40upx 0;
		text-align: center;
		margin-top: 50%;

	}

	.question {
		width: 240upx;
		height: 70upx;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		border-radius: 35px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: rgb(255, 255, 255);

	}

	.label {
		margin:0 10upx;
	}
	.right{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex: 3;
		color: #CCCCCC;
	}
	.adr-choose input {
		float: left;
	}
	.adr-choose label {
		float: right;
		margin-right: 20upx;
	}
	.chooseInp {
		flex: 3;
	}
	
</style>
